<template>
  <div>
    <div v-if="groupList.length">
      <div class="group-content">
        <div v-for="(item,index) in groupList" :ket="item.id" class="group-list"
             :class="{'activeGroup': index==groupIndex}" @click="tabFn(index)">
          <div class="group-list-line">
            <p class="grounp-number">{{ item.user_ids.length }} <em>人</em></p>
            <p class="grounp-name">{{ item.name }}</p>
          </div>
        </div>
      </div>
      <div class="group-user-content">
        <div class="group-user-content-list" v-for="item in groupList[groupIndex].user_ids">
          <div class="group-user-content-list-left">
            <div>
              <img :src="`${item.pic}`" alt="" v-if="item.pic">
              <img src="@/assets/imageAdmin/defultimg.jpg" alt="" v-else>
            </div>
            <p>{{ item.realname }}</p>
          </div>
          <div class="group-user-content-list-right" v-if="item.list && item.list.length">
            <div class="point-list" v-for="item_ in item.list"
                 @click="getPopupFn(item.realname,item_)">
              <p class="point-list-numberLine">
                <el-tooltip class="item" effect="dark" :content="typeShow[item_.style].tooltip" placement="bottom-end">
                  <div v-if="!typeShow[item_.style].show_count">
                    {{ item_.number }}
                    <em>/条</em>
                  </div>
                  <div v-else>
                    {{ item_.number }}
                    <em>/{{ item_.count }}条</em>
                  </div>
                </el-tooltip>
              </p>
              <p class="point-list-name">{{ item_.name }}</p>
            </div>
          </div>
          <div class="group-user-content-list-right"
               v-else
               v-loading="loading"
               element-loading-text="努力加载中"
               element-loading-spinner="el-icon-loading"
               element-loading-background="rgba(0, 0, 0, 0.6)">
            <div class="not-group" v-if="!loading">
              未找到该用户相关数据信息
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="not-group">
      未找到相关群组信息
    </div>
    <popoverList :visible.sync="poppverVisible" :dataOption="dataOption"></popoverList>
  </div>
</template>

<script>
import {groupIndex, groupData} from "@/api/admin/group"
import popoverList from "../popoverList/index"

export default {
  name: "group",
  components: {popoverList},
  data() {
    return {
      groupList: [],
      groupIndex: 0,
      loading: true,
      dataOption: null,
      poppverVisible: false,
      // 0 例行工作； 1 巡班； 2 行政陪餐； 3 拟发通知； 4 拟发问卷；5 档案审阅； 6 档案任务； 7 执行公文
      typeShow: {
        0: {
          show_count: 0, // 是否显示总数 0 不显示 1 显示
          tooltip: '学期例行工作提交总次数' // 提示文字
        },
        1: {
          show_count: 0, // 是否显示总数 0 不显示 1 显示
          tooltip: '巡班总次数' // 提示文字
        },
        2: {
          show_count: 0, // 是否显示总数 0 不显示 1 显示
          tooltip: '行政陪餐次数' // 提示文字
        },
        3: {
          show_count: 0, // 是否显示总数 0 不显示 1 显示
          tooltip: '发布通知总数' // 提示文字
        },
        4: {
          show_count: 0, // 是否显示总数 0 不显示 1 显示
          tooltip: '发布调查问卷总数' // 提示文字
        },
        5: {
          show_count: 1, // 是否显示总数 0 不显示 1 显示
          tooltip: '完成次数/需审阅档案总数' // 提示文字
        },
        6: {
          show_count: 1, // 是否显示总数 0 不显示 1 显示
          tooltip: '完成次数/需执行档案任务总数' // 提示文字
        },
        7: {
          show_count: 1, // 是否显示总数 0 不显示 1 显示
          tooltip: '完成次数/需执行公文任务总数' // 提示文字
        }
      },
      flag: false
    }
  },
  watch: {
    groupIndex() {
      // 请求用户的数据
      this.forUserData()
    }
  },
  created() {
    this.getGroupList()
  },
  methods: {
    getGroupList() {
      groupIndex().then(res => {
        this.groupList = res.list.data
        this.forUserData()
      })
    },
    forUserData() {
      let list = JSON.parse(JSON.stringify(this.groupList[this.groupIndex].user_ids))
      for (let index in list) {
        if (!list[index].list) {
          this.getUserDataFn(list[index].id, index)
        }
      }
    },
    getUserDataFn(id, index) {
      groupData({user_id: id}).then(res => {
        let a = JSON.parse(JSON.stringify(this.groupList[this.groupIndex]))
        for (let item of res.list) {
          item.realname = a.user_ids[index].realname
          item.user_id = a.user_ids[index].id
        }
        a.user_ids[index].list = res.list
        this.$set(this.groupList, this.groupIndex, a)
      })
    },
    tabFn(index) {
      let n = this
      if (this.flag) {
        this.flag = false
        this.groupIndex = index
      }
      setTimeout(() => {
        n.flag = true
      }, 1000)
    },
    getPopupFn(realname, item) {
      this.dataOption = null
      this.userName = realname
      this.dataOption = JSON.parse(JSON.stringify(item))
      this.poppverVisible = true
    }
  },
  mounted() {
  }
}
</script>

<style scoped>
.group-content {
  overflow: hidden;
}

.group-list {
  flex: 1;
  cursor: pointer;
  float: left;
  padding: 5px;
  width: 14%;
}

.group-list.activeGroup .group-list-line {
  background: #dceffd;
}

.group-list:hover {
  background: #dceffd;
}

.group-list-line {
  border: 1px solid #999;
  border-radius: 5px;
  /*margin-right: 5px;*/
  /*margin-bottom: 5px;*/
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 10px 0;
}

.grounp-number {
  font-size: 24px;
  font-weight: bold;
  color: #1b8de5;
}

.grounp-number em {
  font-style: normal;
  font-size: 12px;
}

.grounp-name {

}

.group-user-content {
  margin-top: 20px;
}

.group-user-content-list {
  display: flex;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
  cursor: pointer;
}

.group-user-content-list:hover {
  border: 1px solid #999;
  box-shadow: 0 2px 4px #eee;
}

.group-user-content-list-left {
  width: 140px;
  border-right: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
}

.group-user-content-list-left img {
  width: 50px;
  height: 50px;
  border-radius: 20px;
}

.group-user-content-list-right {
  flex: 1;
  padding: 10px 10px 0;
}

.point-list {
  float: left;
  width: 100px;
  border-radius: 5px;
  border: 1px solid #999;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.point-list:hover {
  background: #f6c4ab;
}

.point-list em {
  font-style: normal;
  font-size: 12px;
}

.point-list-numberLine {
  font-size: 26px;
  color: #f94900;
}

.point-list-name {
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
  width: 80px;
  text-align: center;
  overflow: hidden;
}

.not-group {
  text-align: center;
  padding: 40px;
  font-size: 16px;
  color: #999;
}
</style>
